<template>
  <div class="app-container">
    <el-form  ref="form" :model="form" label-width="150px" @submit.native.prevent>
      <el-form-item>
        <h3 v-if="companyInfo.authState === 0">未认证</h3>
        <h3 v-else-if="companyInfo.authState === 1">已认证</h3>
        <h3 v-else-if="companyInfo.authState === -1">已驳回</h3>
        <h3 v-else>审核中</h3>
        <p>请上传企业彩色营业执照或加盖公章的在职证明</p>
        <el-upload name="file" :action="uoloadUrl" drag :on-success	="onSuccess" >
          <div :style="'background-image: url('+ licenseUrl +');height: 100%;background-repeat:no-repeat; background-size:100% 100%;'">
            <i class="el-icon-upload"/>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          </div>
        </el-upload>
      </el-form-item>

      <el-form-item label="公司名称" class="inline" required>
        <el-input size="medium"  placeholder="请输入公司全称" v-model="companyInfo.name" style="width: 200px;"></el-input>
      </el-form-item>

      <el-form-item label="公司所在地" required>
        <CitySelect @childByValue="setCtiy" ref="citySelect"/>
      </el-form-item>

      <el-form-item label="招聘负责人" class="inline" required>
        <el-input size="medium"  placeholder="请输入招聘负责人" v-model="companyInfo.completeLiberation" style="width: 200px;"></el-input>
      </el-form-item>

      <el-form-item label="联系方式" class="inline" required>
        <el-input size="medium"  placeholder="请输入电话号码" v-model="companyInfo.telephone" style="width: 200px;"></el-input>
      </el-form-item>

      <el-form-item label="联系方式(固定电话)" class="inline">
        <el-input size="medium"  placeholder="请输入区号" v-model="contactInfoLeft" style="width: 80px;"></el-input>
        <el-input size="medium"  placeholder="请输入号码" v-model="contactInfoRight" style="width: 250px;"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submit">提交</el-button>
      </el-form-item>
    </el-form>

  </div>

</template>

<script>
  import { getToken } from '@/utils/auth'
  import { api } from '@/utils/constant'
  import CitySelect from '@/components/CitySelect/'
  // TODO 认证信息接口： /web/company/upgradeAuth
  // 获取七牛token 后端通过Access Key,Secret Key,bucket等生成token
  // 七牛官方sdk https://developer.qiniu.com/sdk#official-sdk

  export default{
    components: {
      CitySelect
    },
    data() {
      return {
        uoloadUrl: window.SERVICE_HTTP + 'web/upload/enclosure?token=' + getToken(),
        form:null,
        charge:null,
        name: '',
        phone:'',
        mobile:'',
        contactInfoLeft: '',
        contactInfoRight: '',
        phone:'',
        image_uri: [],
        fileList: [],
        value: '',
        companyInfo: {}
      }
    },
    computed: {
      licenseUrl () {
        return window.SERVICE_HTTP + 'web/download/enclosure/' + this.companyInfo.licenseUrl
      }
    },
    methods: {
      onSuccess (response, file, fileList) {
        this.companyInfo.licenseUrl = response.msg
      },
      setCtiy (el) {
        this.companyInfo.provincialCode = el[0]
        this.companyInfo.cityCode = el[1]
      },
      getCompanyInfo () {
        this.$fetch(this.$api.getCompanyInfo).then(res => {
          this.companyInfo = res.data
          if (res.data.provincialCode) {
            this.$refs.citySelect.dataBackfill(+res.data.provincialCode, +res.data.cityCode)
          }
          if (res.data.contactInfo) {
            this.contactInfoLeft = res.data.contactInfo.split('-')[0]
            this.contactInfoRight = res.data.contactInfo.split('-')[1]
          }
        })
      },
      submit () {
        if (this.companyInfo.licenseUrl.length === 0) {
          this.$message.error('请上传营业执照或者在职证明')
        } else if (this.companyInfo.provincialCode.length === 0 || this.companyInfo.cityCode.length === 0) {
          this.$message.error('请选择公司所在地')
        } else if (this.companyInfo.completeLiberation.length === 0) {
          this.$message.error('请输入招聘负责人')
        } else if (this.companyInfo.telephone.length === 0) {
          this.$message.error('请输入联系方式')
        } else {
          let params = {
            licenseUrl: this.companyInfo.licenseUrl, // 营业执照地址
            certificateUrl: this.companyInfo.licenseUrl, // 在职证明地址
            provincialCode: this.companyInfo.provincialCode, // 所在省编码
            cityCode: this.companyInfo.cityCode, // 所在市编码
            completeLiberation: this.companyInfo.completeLiberation, // 企业法人（企业联系人）
            contactInfo: this.contactInfoLeft + '-' + this.contactInfoRight, // 企业联系方式 固定电话,格式 xxx-xxxxxx（后台暂未做格式校验）
            name: this.companyInfo.name, // 企业名称
            telephone: this.companyInfo.telephone, // 移动电话
          }
          this.$fetch(this.$api.upgradeAuth, params).then(res => {
            if (res.code === 0) {
              this.$message.success('提交认证成功')
              this.getCompanyInfo()
            }
          })
        }
      }
    },
    created () {
      this.getCompanyInfo()
    }
  }
</script>
